<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>添加商品分类</title>
  <link rel="stylesheet" href="{STATIC_PATH}admin/lib/layui-v2.5.4/css/layui.css" media="all">
  <link rel="stylesheet" href="{STATIC_PATH}admin/css/public.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>商品分类管理</legend>
</fieldset>

<form class="layui-form" action="">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" style="width: 200px;">父级分类</label>
      <div class="layui-input-inline">
        <select name="parent" id="classif"></select>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" style="width: 200px;">商品分类</label>
    <div class="layui-input-inline">
      <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入标分类名称"
             class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" style="width: 200px;"></label>
    <div class="layui-input-inline">
      <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
  </div>
</form>
<script src="{STATIC_PATH}admin/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="{STATIC_PATH}admin/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="{STATIC_PATH}admin/js/common.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'laypage'], function () {
        var form = layui.form;

        async function _classif(res = []) {
            // res 分类数据 先期模拟
            let temps = '<option value="0">-| 顶级菜单</option>';
            var data = [];//菜单数据

            let ret = await $.ajax('{:url("getCategoryList")}')
            if (ret.status === 200) {
                data = ret.data
                console.log(data)
            } else {
                layer.msg(res.msg, {time: 700});
            }

            let toTrees = toTree(data);
            for (let item of toTrees) {
                temps += `<optgroup  data-id="${item["id"]}">`;
                temps += `<option  data-id="${item['id']}" value="${item['id']}">-| ${item["name"]}</option>`
                if (item['children'] && item['children'].length > 0) {
                    for (let child of item['children']) {
                        temps += `<option  data-id="${child['id']}" value="${child['id']}"> &nbsp;&nbsp;&nbsp;--| ${child["name"]} </option>`
                    }
                }
                temps += `</optgroup>`;
            }
            $('#classif').html(temps)
            form.render('select');
        }


        function queryClassif() { // 请求分类 后端接口
            let url = '';
            layObj.get(url, function (res) {
            }); // 封装的ajax
            _classif()
        }

        queryClassif(); // 获取后端分类数据

        //监听提交
        form.on('submit(demo1)', function (data) {
            $.ajax({
                url: '{:url("save")}',
                method: 'POST',
                data: data.field,
                success: (res) => {
                    if (res.status == 200) {
                        _classif()
                        layer.msg(res.msg, {time: 700});
                    } else {
                        layer.msg(res.msg, {time: 700});
                    }
                }
            })

            return false;
        });

    })
</script>
</body>
</html>
